<template>
    <el-tabs v-model="activeName" @tab-click="handleChangeTab">
        <el-tab-pane label="媒资列表" name="medialist">
            <media :packageid="packageid" ref="mediaRef" />
        </el-tab-pane>
        <el-tab-pane label="素材列表" name="materiallist">
            <material :packageid="packageid" ref="materialRef" />
        </el-tab-pane>
        <el-tab-pane label="频道管理" name="channel">
            <channel :packageid="packageid" ref="channelRef" />
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {ref, nextTick} from 'vue'
    import {useRoute} from 'vue-router'
    import Material from '../components/material/index'
    import Media from  '../components/media/index'
    import Channel from '../components/channel/index'
    export default {
        name: "",
        components: {Material,Media, Channel},
        setup() {
            const route = useRoute()
            const packageid = parseInt(route.query.packageid)
            const packageName = route.query.packageName
            const activeName = ref('medialist')
            const mediaRef = ref(null)
            const materialRef = ref(null)
            const channelRef = ref(null)

            /** 切换tab事件 **/
            const handleChangeTab = (tab) => {
                if (tab.props.name == 'materiallist') {
                    nextTick(() => {
                        materialRef.value.init()
                    })
                } else if (tab.props.name == 'channel') {
                    nextTick(() => {
                        channelRef.value.init()
                    })
                }
            }
            return {
                activeName,
                handleChangeTab,
                mediaRef,
                materialRef,
                packageid,
                channelRef,
                packageName
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>
